<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1(){
            var mydiv=document.getElementById("mydiv");//DOM对象

            // DOM对象.innerHTML
            // 如果标签体的内容中包含标签
            // 取值的时候可以将标签名同时取出来
            console.log(mydiv.innerHTML);

            // DOM对象.innerHTML=值
            // 如果赋值的内容中包含标签
            // 会将该标签的效果在页面中解析出来
            mydiv.innerHTML="<h3>我是h3标签</h3>";
        }
        function f2(){
            var mydiv=document.getElementById("mydiv");//DOM对象
            // DOM对象.innerText
            // 就算标签体的内容中包含标签
            // 在取值的时候也只能取出文本内容
            // 无法将标签体中的标签名取出来
            // console.log(mydiv.innerText);

            // DOM对象.innerText=值
            //只是将标签当做了纯文本，并未解析
            mydiv.innerText="<h4>重新赋值</h4>";

        }
    </script>
</head>
<body>
    <input type="button" value="按钮" onclick="f1()">
    <input type="button" value="按钮" onclick="f2()">
    <div id="mydiv">
        <p>this is p</p>
    </div>
</body>
</html>